<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我要借钱</title>
    <!-- 借入 -->
    <!--  VUE -->
    <script src="../resources/lib/js/vue.js"></script>
    <!-- elementUI -->
    <link rel="stylesheet" href="../resources/lib/css/index.css">
    <script src="../resources/lib/js/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- axios -->
    <script src="../resources/lib/js/axios.js"></script>
    <!-- 个人 -->
    <!--<link rel="stylesheet" href="../resources/css/consumer/consumerCenter.css">-->
    <link rel="stylesheet" href="../resources/css/product/borrow.css">
    <link rel="stylesheet" href="../resources/css/login.css">
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<!-- 发标 -->
<div id="app">
    <div id="wrapper">
        <!-- 头部 -->
        <div id="header">
            <!-- 放入主图 用来居中 -->
            <div id="header_main">
                <!-- logo -->
                <div id="logo">
                    <img src="../resources/images/logo/logo-youse-lo.png" height="150" width="300"/>
                </div>
                <!-- 导航菜单 -->
                <div id="nav">
                    <ul>
                        <li v-for="(item, index) in nav" :key="index">
                            <a v-cloak target="_blank" :href="item.url">{{item.title}}</a>
                        </li>
                    </ul>
                </div>
                <!-- 用户信息简单展示 -->
                <!-- 登录入口 -->
                <div v-cloak id="user">
                    <a v-if="loginBtn" @click="visitLogin = true" class="sk-login">登录</a>
                    <div id="userInfo" v-if="isLogin">
                        <div class="user-info">
                            <img class="hat_index" src="../resources/images/tou.png"/>
                        </div>
                        <div id="user-topbar-info">
                            <!-- 头部 -->
                            <div class="user-info-header">
                                用户：<span>{{userInfo.username}}</span>
                                <p>
                                    <span>未实名认证</span>
                                </p>
                            </div>
                            <!-- 主体 -->
                            <div class="user-info-middle"></div>
                            <!-- 底部 -->
                            <div class="user-info-footer">
                                <div class="user-info-footer-left">
                                    <a href="/consumerCenter">个人中心</a>
                                </div>
                                <div class="user-info-footer-right">
                                    <a @click="logout" href="javascript:;">
                                        <span>退出登录</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="banner">
            <img src="../resources/images/banner/jk_banner1.jpg" alt="">
        </div>
        <!-- 主要内容 -->
        <div id="content">
            <div id="product">
                <!--<div class="product-header text-center">
                    <div class="product-header-title">快速借款</div>
                    <div class="product-header-detail">
                        <span>简单便捷</span>
                        <span>多种额度</span>
                        <span>及时高效</span>
                    </div>
                </div>-->
                <div class="product-block">
                    <div class="product-block-box">
                        <div class="product-block-left">
                            <img src="../resources/images/jkIcon01.png" alt="">
                        </div>
                        <ul class="product-block-right">
                            <li>
                                <div class="top-text">成功借款人数</div>
                                <div class="bottom-num">
                                    <span class="counter">410886</span>
                                    <span class="unit">人</span>
                                </div>
                            </li>
                            <li>
                                <div class="top-text">成功借款金额</div>
                                <div class="bottom-num">
                                    <span class="counter">10033957943</span>
                                    <span class="unit">元</span>
                                </div>
                            </li>
                            <li>
                                <div class="top-text">平均满标时间</div>
                                <div class="bottom-num"><span>4.23</span><span class="unit">小时</span></div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="product-content">
                    <div class="product-wrap-box">
                        <div class="product-title">借款产品</div>
                        <div class="product-english-title">LOAN PRODUCTS</div>
                        <div class="product-list-box">
                            <ul class="product-list-ul clearfix">
                                <li>
                                    <div class="list-wrap-box">
                                        <div class="left-img">
                                            <img class="product-detail-icon" src="../resources/images/credit-icon.png" alt="">
                                        </div>
                                        <div class="right-text">
                                            <div class="big-title">信用贷</div>
                                            <div class="reminder-title"><span class="first-span">无抵押</span><span>快速授信放款</span></div>
                                            <div class="content">
                                                <p> 多享金汇信用借款，适用自然人（非法人或组织）个人消费目的</p>
                                                <p>的贷款。仅需3步即可完成申请：大数据风控</p>
                                                <p>体系进行审核，放款到账。</p>
                                            </div>
                                            <a class="bottom-btn" href="/product/borrow/personBorrowBid" target="_blank">查看详情</a>
                                        </div>
                                        <img src="/front/resource/images/new/itemBg.png" alt="" class="bottom-back-img">
                                    </div>
                                </li>
                                <li>
                                    <div class="list-wrap-box" style="float: right">
                                        <div class="left-img">
                                            <img class="product-detail-icon" src="../resources/images/san-icon.png" alt="">
                                        </div>
                                        <div class="right-text">
                                            <a @click="borrowBidApply" href="javascript:;"><div class="big-title">散标</div></a>
                                            <div class="reminder-title"><span>快速筹款，筹得放心</span></div>
                                            <div class="content">
                                                <p>散标主要包括信用借款、消费分期借款、房产抵押借款、车辆抵押借款等项目。</p>
                                                <p>散标项目对应逾期借款均由其资产推荐方提供代偿或回购。</p>
                                            </div>
                                            <a class="bottom-btn" href="http://wpa.b.qq.com/cgi/wpa.php?ln=2&amp;uin=1206751678" target="_blank">在线咨询</a>
                                        </div>
                                        <img src="/front/resource/images/new/itemBg.png" alt="" class="bottom-back-img">
                                    </div>
                                </li>
                                <li>
                                    <div class="list-wrap-box">
                                        <div class="left-img">
                                            <img class="product-detail-icon" src="../resources/images/manage-icon.png" alt="">
                                        </div>
                                        <div class="right-text">
                                            <div class="big-title">经营贷</div>
                                            <div class="reminder-title"><span>助力微小中实体企业融资</span></div>
                                            <div class="content">
                                                <p>面向中小企业主或个体工商户的贷款业务产品，借款用途</p>
                                                <p> 主要用于企业或个体生产经营的贷款，规模性系统性的扶</p>
                                                <p>助小微企业。</p>
                                            </div>
                                            <a class="bottom-btn" href="http://wpa.b.qq.com/cgi/wpa.php?ln=2&amp;uin=1206751678" target="_blank">在线咨询</a>
                                        </div>
                                        <img src="/front/resource/images/new/itemBg.png" alt="" class="bottom-back-img">
                                    </div>
                                </li>
                                <li>
                                    <div class="list-wrap-box" style="float: right">
                                        <div class="left-img">
                                            <img class="product-detail-icon" src="../resources/images/common-icon.png" alt="">
                                        </div>
                                        <div class="right-text">
                                            <div class="big-title">通用贷</div>
                                            <div class="reminder-title"><span>为用户需求个性定制产品</span></div>
                                            <div class="content">
                                                <p>通用贷是为有贷款需求的客户量身打造定制化贷款产品。根</p>
                                                <p>据借款人的融资金额、期限需求，以及借款人的资质情况提</p>
                                                <p>供个性化的借款服务方案。</p>
                                            </div>
                                            <a class="bottom-btn" href="http://wpa.b.qq.com/cgi/wpa.php?ln=2&amp;uin=1206751678" target="_blank">在线咨询</a>
                                        </div>
                                        <img src="../resources/images/currency-idcon.png" alt="" class="bottom-back-img">
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="product-icon"></div>
            </div>
            <div id="common-issue">
                <img class="a" src="../resources/images/66666.jpg" alt=""
                     style="margin-bottom: 280px; margin-top: 200px;">
                <img class="b" src="../resources/images/alalal.png" alt="" style="margin-bottom: 200px;">
            </div>
        </div>

        <!-- 脚部 -->
        <div id="foot">
            <div class="sk-foot-main clear">
                <div class="sk-foot-left left">
                    <div class="n-link">
                        <a href="http://www.itrust.org.cn/home/index/itrust_certifi/wm/19671944XX.html" target="_blank">
                            <img src="../resources/images/foot/index-integrity-icon.png" alt="">
                        </a>
                        <a href="http://gawa.bjchy.gov.cn/websearch/" target="_blank">
                            <img src="../resources/images/foot/jingcha.png" alt="">
                        </a>
                        <a href="https://trustsealinfo.websecurity.norton.com/splash?form_file=fdf/splash.fdf&amp;dn=*.9fgroup.com&amp;lang=zh_cn"
                           target="_blank">
                            <img src="../resources/images/foot/norton.png" alt="">
                        </a>
                        <a href="http://webscan.360.cn/index/checkwebsite/url/www.9fgroup.com"
                           name="6d18753f3a834479ee835f4f9bc009ec">
                            <img src="../resources/images/foot/360.png" alt="">
                        </a>
                        <a id="_pingansec_bottomimagelarge_p2p"
                           href="http://si.trustutn.org/info?sn=420180312000632784551&amp;certType=4">
                            <img src="../resources/images/foot/p2p_official_large.jpg">
                        </a>
                    </div>
                    <p>Copyright©2018-2019 <span>华金宝个人学习项目使用</span> <a href="http://http://www.miitbeian.gov.cn">豫ICP备18045023号-1</a>
                    </p>

                </div>
                <dl class="right">
                    <dt><img src="../resources/images/foot/huajinbao.png" alt=""></dt>
                    <dd>
                        <div class="sk-icon">
                            <a target="_blank" href="javascript;;">
                                <i class="fa fa-github fa-lg" aria-hidden="true"></i>
                            </a>
                            <a target="_blank" href="javascript;;">
                                <i class="fa fa-qq fa-lg" aria-hidden="true"></i>
                            </a>
                        </div>
                        <p class="n-text">QQ群：</p>
                        <p class="n-tel">965903855
                            <small>9:30-21:00</small>
                        </p>
                    </dd>
                </dl>
            </div>
        </div>
    </div>


    <!----------------------------------------- 弹出层 ----------------------------------------->
    <!-- 登录层 -->
    <el-dialog
            :visible.sync="visitLogin"
            width="520px"
            :close-on-click-modal="false"
            :lock-scroll="false"
            :before-close="loginDialogClose"
            center>
        <div slot="title" id="user-login-header">
            <img src="../resources/images/logo/510-220-font-logo.png" alt="">
        </div>
        <div id="user-login">
            <div id="user-login-main">
                <div class="with-line with-line-a">使用手机号/用户名登录</div>
                <div class="user-input">
                    <input v-model="loginInfo.username" id="loginUsername" name="loginUsername"
                           class="sk-user-input-style" placeholder="输入手机号或用户名"/>
                    <input v-model="loginInfo.password" @keyup.enter="login" id="loginPassword" name="loginPassword"
                           class="sk-user-input-style" placeholder="密码"/>
                    <a @click="login" class="sk-user-btn" href="javascript:;">
                        <span>登录</span>
                    </a>
                </div>
            </div>
        </div>
        <!-- footer -->
        <div slot="footer" id="user-login-foot">
            <div id="sk-login-cc">
                <div class="sk-login-forget">
                    <a @click="toForget" href="javascript:;">忘记密码»</a>
                </div>
                <div class="sk-login-register">
                    <span>还没有账号？</span><a @click="toRegister" href="javascript:;">点击注册»</a>
                </div>
            </div>
        </div>
    </el-dialog>
    <!-- 注册层 -->
    <el-dialog
            :visible.sync="visitRegister"
            width="520px"
            :close-on-click-modal="false"
            :lock-scroll="false"
            :before-close="registerDialogClose"
            center>
        <div slot="title" id="user-register-header">
            <img src="../resources/images/logo/510-220-font-logo.png" alt="">
        </div>
        <div id="user-register">
            <div id="user-register-main">
                <div class="with-line with-line-a">注册</div>
                <div class="user-input">
                    <input v-model="registerInfo.username" id="regUsername" name="regUsername"
                           class="sk-user-input-style" placeholder="用户名" maxlength="20"/>
                    <div id="sk-register-send-code">
                        <input v-model="registerInfo.phone" id="regPhone" name="regPhone" class="sk-user-input-style"
                               placeholder="手机号码" maxlength="11"/>
                        <a v-show="visitSendMessage" @click="sendMessage" href="javascript:;">发送验证码</a>
                        <a v-show="!visitSendMessage"><span>{{lastTime}}</span>秒后发送短信</a>
                    </div>
                    <input @blur="verifyCode" v-model="registerInfo.code" id="regCode" name="regCode"
                           class="sk-user-input-style sk-register-regCode" placeholder="验证码" maxlength="6"/>
                    <input v-model="registerInfo.password" id="regPassword" name="regPassword" type="password"
                           class="sk-user-input-style"
                           placeholder="密码" maxlength="20"/>
                    <input v-model="registerInfo.repassword" @keyup.enter="register" id="regRePassword"
                           name="regRePassword" type="password" class="sk-user-input-style"
                           placeholder="确认密码" maxlength="20"/>
                    <a @click="register" class="sk-user-btn" href="javascript:;">
                        <span>注册</span>
                    </a>
                </div>
            </div>
        </div>
        <div slot="footer" id="user-register-foot">
            <div id="sk-register-cc">
                <div class="sk-register-to-login">
                    <span>已有账号？</span><a @click="toLogin" href="javascript:;">点击登录»</a>
                </div>
            </div>
        </div>
    </el-dialog>
    <!-- 找回密码层 -->
    <el-dialog
            :visible.sync="visitForget"
            width="520px"
            :close-on-click-modal="false"
            :lock-scroll="false"
            :before-close="forgetDialogClose"
            center>
        <div slot="title" id="user-forget-header">
            <img src="../resources/images/logo/510-220-font-logo.png" alt="">
        </div>
        <div id="user-forget">
            <div id="user-forget-main">
                <div class="with-line with-line-a">找回密码</div>
                <div class="user-input">
                    <input v-model="forgetInfo.phone" id="forgetPhone" name="forgetPhone" class="sk-user-input-style"
                           placeholder="手机号码"/>
                    <a @click="toForget" class="sk-user-btn" href="javascript:;">
                        <span>重置</span>
                    </a>
                </div>
            </div>
        </div>
        <div slot="footer" id="user-forget-foot">

        </div>
    </el-dialog>
    <!-- 弹出层 -->

</div>
</body>
</html>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            nav: [
                {title: '首页', url: '/'},
                {title: '我要出借', url: '/product/loan'},
                {title: '我要借款', url: '/product/borrow'},
                {title: '信息披露', url: '#'},
                {title: '关于我们', url: '#'}
            ],
            products: [
                {title: '信用贷', url: '/product/borrow/creditOfBorrow'},
                {title: 'you', url: '#'},
                {title: 'iii', url: '#'},
                {title: 'liuliuliu', url: '#'}
            ],
            lastTime: 60,
            loginInfo: {},
            registerInfo: {},
            forgetInfo: {},
            visitLogin: false,
            visitRegister: false,
            visitForget: false,
            visitSendMessage: true,
            loginBtn: false,
            isLogin: false,
            userInfoBar: false,
            userInfo: {},
        },
        methods: {
            toForget: function () {
                app.visitRegister = false
                app.visitLogin = false
                app.visitForget = true
                app.forgetInfo = {}
            },
            toRegister: function () {
                app.visitForget = false
                app.visitLogin = false
                app.visitRegister = true
                app.registerInfo = {}
            },
            toLogin: function () {
                app.visitForget = false
                app.visitRegister = false
                app.visitLogin = true
                app.loginInfo = {}
            },
            login: function () {
                login()
            },
            logout: function () {
                logout()
            },
            register: function () {
                register()
            },
            loginDialogClose: function (done) {
                setTimeout(_ => {
                    initAllDialogInfo()
                }, 100)
                done()
            },
            registerDialogClose: function (done) {
                setTimeout(_ => {
                    initAllDialogInfo()
                }, 100)
                done()
            },
            forgetDialogClose: function (done) {
                setTimeout(_ => {
                    initAllDialogInfo()
                }, 100)
                done()
            },
            sendMessage: function () {
                sendRegisterSmsCode()
            },
            verifyCode: function () {
                verifyCode()
            },
            borrowBidApply: function() {
                borrowBidApply()
            }
        }
    })
</script>

<script>
    window.onload = function () {
        initUser()
    }

    function borrowBidApply() {
        if(app.isLogin) {
            window.location.href = '/product/borrow/personBorrowBid'
        } else {
            app.$message.error('请登录后进行操作')
        }
    }

    function verifyCode() {
        axios({
            method: 'post',
            url: '/consumer/register/verifyCode',
            data: app.registerInfo
        }).then(function (response) {

        })
    }

    function sendRegisterSmsCode() {
        axios({
            method: 'post',
            url: '/consumer/register/sendMessage',
            data: app.registerInfo
        }).then(function (response) {
            app.visitSendMessage = false
            app.lastTime = 60
            var time = setInterval(function () {
                app.lastTime--
                console.log(app.lastTime)
                if (app.lastTime <= 0) {
                    app.visitSendMessage = true
                    clearInterval(time)
                }
            }, 1000)
        })
    }

    function register() {
        axios({
            method: 'post',
            url: '/consumer/register/verifyCode',
            data: app.registerInfo
        }).then(function (response) {
            visitAllDialog(false)
        })
    }

    function logout() {
        axios({
            method: 'post',
            url: '/consumer/logout'
        }).then(function (response) {
            app.isLogin = false
            app.loginBtn = true
            initAllDialogInfo()
            initUserInfo()
        })
    }

    function login() {
        axios({
            method: 'post',
            url: '/consumer/login',
            data: app.loginInfo
        }).then(function (response) {
            app.userInfo.username = response.data.object.username
            app.userInfo.id = response.data.object.consumerId
            app.visitLogin = false // 隐藏登录窗口
            app.loginBtn = false // 隐藏登录按钮
            app.isLogin = true // 已登录
            initAllDialogInfo()
        });
    }

    function visitAllDialog(boolean) {
        visitLogin(boolean)
        visitRegister(boolean)
        visitForget(boolean)
    }

    function visitForget(boolean) {
        app.visitForget = boolean
    }

    function visitRegister(boolean) {
        app.visitRegister = boolean
    }

    function visitLogin(boolean) {
        app.visitLogin = boolean
    }

    function initUserInfo() {
        app.userInfo = {}
    }

    function initAllDialogInfo() {
        initLoginInfo()
        initRegisterInfo()
        initForgetInfo()
    }

    function initLoginInfo() {
        app.loginInfo = {}
    }

    function initRegisterInfo() {
        app.registerInfo = {}
    }

    function initForgetInfo() {
        app.forgetInfo = {}
    }

    function initUser() {
        axios({
            method: 'post',
            url: '/consumer/getUserInfoAfterLogin'
        }).then(function (response) {
            console.log(response)
            if (response.data.user != null) {
                // 已登录
                app.userInfo = response.data.user[0]
                app.loginBtn = false
                app.isLogin = true
            } else {
                // 未登录
                app.isLogin = false
                app.loginBtn = true
            }
        })
    }
</script>